<template>
    <div class="tbez">

        <div class="content">
            <div class="main-entrance">
                <div class="left">
                    <carousel></carousel>
                    <!-- <img src="~@images/tou-biao-e-zhan/Mask.png" alt=""> -->
                </div>
                <div class="right">
                    <div class="weather">
                        <top-info-new ref="topInfo" :city.sync="city"></top-info-new>
                    </div>
                    
                    <div class="remind">
                        <div style="flex:1;">
                            <remind 
                                :rightItemStatus.sync="rightItemStatus" 
                                :getReminderStatistic="getReminderStatistic"
                            ></remind>
                        </div>
                        <!-- <div class="tips" @click="tipsHandler">
                            每日小贴士
                        </div> -->
                    </div>

                    <div class="tools">
                        <div class="item" @click="jyzxHandler" v-czc="['首页', '打开弹窗' , '各地市交易中心及办事指南',0 ,'home-dialog-jyzx']">
                            <div>
                                <p>各地市交易中心及办事指南</p>
                                <p>一站式协助</p>
                            </div>
                        </div>

                        <div class="item"  @click="toolsHandler" v-czc="['首页', '打开弹窗' , '优质三方工具推荐及使用',0 ,'home-dialog-tools']">
                            <div>
                                <p>优质三方工具推荐及使用</p>
                                <p>CA办理等投标工具应有尽有</p>
                            </div>
                        </div>

                    </div>

                    <div style="margin-top:12px; position: relative;">
                        <commonly-used ref="commonlyUsed" :rightItemStatus.sync="rightItemStatus"></commonly-used>
                    </div>

                </div>
            </div>

            <div class="fast-entrance" id="fast-entrance">
                <div class="all-entrance">
                    <entrance  
                        v-for="(item,index) in entranceList" :key="index"
                        :ids="index"
                        :model="item"
                        v-czc="['首页', '导航' , item.title , 0 , `home-btn-${item.nodeid}`]"
                    >
                    </entrance>
                </div>
            </div>

            <div class="search">
                <search></search>
            </div>

        </div>

        <div class="tbez-dialog">
            <el-dialog title="" :visible.sync="dialogVisible" :close-on-press-escape="false" :show-close="false" :close-on-click-modal="false" width="30%">
                <my-back :afterSubmit="afterSubmit" :recommondIds="recommondIds" :dialogVisible="dialogVisible" @cancel="afterSubmit"></my-back>
            </el-dialog>
        </div>

        <my-mask :finish="endOfMack" v-if="maskShow" type="index">
        </my-mask>



        <!-- 交易中心-->
        <el-dialog
            class="jjyzx-bszn-dialog"
            :title="dialogTitle"
            :visible.sync="jyzxDialog"
            width="970px"
        >
            <jyzxAndBszn ref="jyzxAndBszn" v-if="jyzxDialog" ></jyzxAndBszn>
        </el-dialog>


        <!--第三方工具-->
        <el-dialog
            class="third-tools-dialog"
            :title="dialogTitle"
            :visible.sync="toolsDialog"
            width="970px"
        >

            <trading-platform></trading-platform>
            <!-- <div class="download-tools">
                <h3>工具下载</h3>
                <download-tool></download-tool>
            </div>
            <div class="others">
                <h3>其他服务</h3>
                <other></other>
            </div> -->


        </el-dialog>


    </div>
</template>

<script>
import chat1 from '../../assets/images/tou-biao-e-zhan/chat-1.png';
import chat2 from '../../assets/images/tou-biao-e-zhan/chat-2.png';
import chat3 from '../../assets/images/tou-biao-e-zhan/chat-3.png';
import chat4 from '../../assets/images/tou-biao-e-zhan/chat-4.png';
import chat5 from '../../assets/images/tou-biao-e-zhan/chat-5.png';

import entrance1 from '../../assets/images/tou-biao-e-zhan/entrance-1.png';
import entrance2 from '../../assets/images/tou-biao-e-zhan/entrance-2.png';
import entrance3 from '../../assets/images/tou-biao-e-zhan/entrance-3.png';
import entrance4 from '../../assets/images/tou-biao-e-zhan/entrance-4.png';
import entrance5 from '../../assets/images/tou-biao-e-zhan/entrance-5.png';
import entrance6 from '../../assets/images/tou-biao-e-zhan/entrance-6.png';

import Remind from '@/pages/application/remind/sections/home.vue';
import search from '@/pages/application/info/section/search/index.vue';

import topInfoNew from './components/top-info-new.vue';
import tradingPlatform from './sections/trading-platform/index.vue';
import commonlyUsed from './sections/commonly-used/index.vue';
import platformTool from './sections/platform-tool/index.vue';
import myBack from './components/back.vue';
import myMask from '@components/sys/mask/index.vue';

import Ceiling from '@js/Ceiling';
import appNode from '@js/app-node';
import storage from '@js/storage.js';
import beforePageLeave from '@js/beforePageLeave.js';

import { mapGetters, mapMutations, mapActions } from 'vuex';

import entrance  from './components/entrance';  //快捷入口
import commonUse  from './components/common-use.vue'; //常用地址
import jyzxAndBszn  from './sections/trading-platform/components/jyzx-and-bszn.vue'; //交易中心
import carousel  from './components/carousel.vue'; //交易中心

export default {
    beforeRouteLeave(to, from, next) {
        next();
    },

    layout: 'client',
    head: {},
    components: {
        Remind,
        search,

        tradingPlatform,
        commonlyUsed,
        platformTool,
        myBack,
        myMask,

        entrance,
        topInfoNew,
        commonUse,
        jyzxAndBszn,
        carousel,
        
    },
    async asyncData(context) {
        let [navData] = await Promise.all([
            appNode.ssrReq
                .call(context, `${context.store.state.api.tbUrl}/home/getmiddlenavigate.json`, {
                    // proname: '河北省',
                    // proid: '130000',
                })
                .then((data) => data),
        ]);

        context.store.commit('navigate/updateNavigateData', navData);

        return {
            navData,
        };
    },

    data: () => ({
        openid: '',
        city: {
            code: '',
            name: '',
        },
        rightItemStatus: {
            //右侧元素状态 'shrink'收缩, 'open'展开
            top: 'shrink', //
            bottom: 'open',
        },
        recommondIds: [],
        recommendList: [],

        dialogVisible: false,

        clientCloseHandler: null,
        maskShow: false,

        chat1:chat1,
        chat2:chat2,
        chat3:chat3,
        chat4:chat4,
        chat5:chat5,

        cardTitleList:[
            {label:'项目信息全网覆盖</br>日更数十万条项目新动态',imgSrc:chat1},
            {label:'打通项目库 企业库 人员库</br>多维度关联分析',imgSrc:chat2},
            {label:'综合多维度数据</br>构建企业画像分析',imgSrc:chat3},
            {label:'项目、企业数据全面跟踪</br>竞争对手及业主动态监控',imgSrc:chat4},
            {label:'历年招投标数据建模</br>潜在项目人脉圈一键获取',imgSrc:chat5},
        ],

        entranceList:[
            {
                title:'商机人脉推送',
                imgSrc:entrance1,
                text:'找项目 找人脉</br>轻松搞定',
                colorList:['#0176de','#0887ef','#0f96ff'],
                href: '/business-contact',
                isneedLogin:false,
                nodeid: 'business',
            },
            {
                title:'监控对手及业主',
                imgSrc:entrance2,
                text:'对手/业主动态变化</br>实时查看',
                colorList:['#fd3e4b','#fe645b','#ff8369'],
                href: '/home?searchTab=follow',
                isneedLogin:false,
                nodeid: 'contact',
            },
            {
                title:'数据报表',
                imgSrc:entrance3,
                text:'行业地区招投标数据报表</br>轻松获取',
                colorList:['#104cf4','#326afa','#5083ff'],
                href: '/tools/data-export?data=month',
                isneedLogin:false,
                nodeid: 'bidWinningForecast',
            },
            {
                title:'数据统计',
                imgSrc:entrance4,
                text:'历年招投标数据分析</br>洞察市场变化',
                colorList:['#f78910','#fba830','#ffc14a'],
                href: '/tools/data-export?data=figure',
                isneedLogin:false,
                nodeid: 'dataExport',
            },
            {
                title:'投标方案模板库',
                imgSrc:entrance5,
                text:'涵盖全网资源</br>模板操作简单',
                colorList:['#01b398','#18c8b2','#2ad9c6'],
                href: '/document',
                isneedLogin:false,
                nodeid: 'document',
            },
            {
                title:'投标文件制作',
                imgSrc:entrance6,
                text:'在线操作</br>且引用云盘实现资源共享',
                colorList:['#d55c96','#e76ca0','#f77aa9'],
                href: '/application/biddingfiletool',
                isneedLogin:true,
                nodeid: 'biddingfiletool',
            },
        ],
        dialogTitle:'',
        jyzxDialog:false,
        toolsDialog:false,

    }),
    computed: {
        ...mapGetters({
            getNickname: 'userinfo/getNickname',
            dialogLoginVisible: 'getStatisticData',
        }),
        model2: {
            get() {
                return this.dialogLoginVisible;
            },
            set(val) {
                this.$store.commit('updateStatisticData', val);
            },
        },
    },
    methods: {
        ...mapActions({
            getNavigateData: 'navigate/getNavigateData',
            showBindMobile: 'userinfo/showBindMobile',
            closeLogin: 'global-dialog/closeLogin',
        }),
        ...mapMutations({
            updateNavigateData: 'navigate/updateNavigateData',
            updateData: 'userinfo/updateData', //更新用户信息
        }),
        getReminderStatistic() {
            this.$refs.topInfo.getReminderStatistic();
        },
        afterSubmit() {
            this.dialogVisible = false;

            this.$refs.commonlyUsed.getData();

            this.clientCloseHandler && this.clientCloseHandler();
        },
        endOfMack() {
            this.maskShow = false;
            storage.setLocal('tbMask', '1');
        },

        saveTag(close) {
            var that = this;
            if (that.getNickname) {
                // 已登录
                that.$get(`${that.$store.state.api.tbUrl}/home/recommondout.json`, (data, res) => {
                    if (data && data.length > 0) {
                        // 有点击过，调用 我的常用 列表
                        that.$get(`${that.$store.state.api.tbUrl}/home/commonlist.json`, (data, res) => {
                            if (data && data.length > 0) {
                                that.recommondIds = data.map((item) => item.guid);
                            }

                            if (!close) {
                                return;
                            }

                            that.clientCloseHandler = close;
                        });
                    } else {
                        close && close();
                    }
                });
            } else {
                close && close();
            }
        },
        tipsHandler:function(){
            this.$alert('该功能即将上线敬请期待！', {
                confirmButtonText: '确定',
                callback: (action) => {},
            });
        },
        //交易中心
        jyzxHandler(){
            this.dialogTitle = '交易中心及办事指南';
            this.jyzxDialog = true;
        },
        //第三方工具
        toolsHandler(){
            this.dialogTitle = '优质三方工具';
            this.toolsDialog = true;
        },
    },
    created() {
        // this.getNavigateData();
    },
    mounted() {
        var that = this;
        new Ceiling({
            el: this.$refs['rightBottom'],
            zoom: document.querySelector('.layout-default>.page-body'),
        });

        beforePageLeave.add(close => {
            this.saveTag(close);

            if (that.getNickname) {
                // 已登录
                that.$get(`${that.$store.state.api.tbUrl}/home/recommondout.json`, (data, res) => {
                    if (data && data.length > 0) {
                        // 有点击过，调用 我的常用 列表
                        that.$get(`${that.$store.state.api.tbUrl}/home/commonlist.json`, (data, res) => {
                            if (data && data.length > 0) {
                                that.recommondIds = data.map((item) => item.guid);
                            }

                            that.clientCloseHandler = close;

                            that.dialogVisible = true;
                        });
                    } else {
                        close();
                    }
                });
            } else {
                close();
            }
        });

        const SERIAL_CODE = this.$cookies.get('SERIAL_CODE');
        const tbMask = storage.getLocal('tbMask');
        if (!SERIAL_CODE && tbMask != '1') {
            this.maskShow = true;
        }
    },
    beforeDestroy() {
        beforePageLeave.remove();
    },
    // watch
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';


.tbez {
    .content{
        margin-top: 12px;

        .main-entrance{
            // height: 450px;
            display: flex;
            justify-content: space-between;

            .left{
                width:845px;
                height:459px;
                -webkit-animation: entrance-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	            animation: entrance-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
            }

            .right{
                -webkit-animation: entrance-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
	            animation: entrance-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940);
                flex:1;
                margin-left: 12px;

                .weather{
                    background-color: white;
                }

                .remind{
                    margin-top: 12px;
                    height: 167px;
                    display: flex;
                    justify-content: space-between;

                    .tips{
                        cursor: pointer;
                        margin-left: 5px;
                        width: 45px;
                        writing-mode: vertical-rl;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        border: 1px solid #3b68ff;
                        color: #3b68ff;
                        letter-spacing:5px;
                        transition: all 0.5s;
                    }
                    .tips:hover{
                        background-color: #3b68ff;
                        color: white;
                    }
                }

                .tools{
                    margin-top: 12px;
                    height: 68px;
                    display: flex;
                    font-size: 13px;
                    text-align: center;
                    .item{
                        font-size: 12px;
                        cursor: pointer;
                        margin-right: 12px;
                        flex:1;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        line-height: 2em;
                        color: white;
                        background-image: linear-gradient(45deg, #8195ea,#5a76ee, #3054ec);
                        transition: all 0.4s;
                        p{
                            font-weight: bold;
                        }
                        p:nth-last-child(1){
                            font-weight: normal;
                        }
                    }
                    .item:hover {
                        box-shadow: 0 2px 12px 0 #3054ec;
                        
                    }

                    .item:nth-last-child(1){
                        margin-right: 0px;
                        background-image: linear-gradient(45deg, #fd8f20,#ff7c00, #ff6500);
                        transition: all 0.4s;
                    }
                    .item:nth-last-child(1):hover{
                        box-shadow: 0 2px 12px 0 #ff6500;
                       
                    }

                }
            }

        }

        .all-card-title{
            margin-top: 36px;
            display: flex;
            .card-title{
                flex: 1;
                margin-right: 12px;
            }
            .card-title:nth-last-child(1){
                margin-right: 0px;
            }
            
        }

        .fast-entrance{
            margin-top: 20px;

            .all-entrance{
                display: flex;

                .entrance{
                    margin-right: 12px;
                    flex:1;
                }

                .entrance:nth-last-child(1){
                    margin-right: 0px;
                }
                
            }
        }

        .search{
            margin-top: 20px;
        }
    }

    .jjyzx-bszn-dialog {
        ::v-deep .el-dialog__body {
            padding: 10px 20px 20px 20px;
        }   
        ::v-deep .el-dialog__header {
           font-weight: bold;
        }      
    }

    .third-tools-dialog{
        line-height: 2em;
        ::v-deep .el-dialog__body {
            padding: 0px 20px 20px 20px;
        }   
        ::v-deep .el-dialog__header {
           font-weight: bold;
        } 
    }

    @keyframes entrance-left {
        0% {
            -webkit-transform: translateX(-50px);
                    transform: translateX(-50px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
                    transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes entrance-right {
        0% {
            -webkit-transform: translateX(50px);
                    transform: translateX(50px);
            opacity: 0;
        }
        100% {
            -webkit-transform: translateX(0);
                    transform: translateX(0);
            opacity: 1;
        }
    }


}

</style>
 